<template>
  <div>
    <template>
      <el-menu-item
        v-if="!item.children"
        :index="item.id"
        :key="item.id"
        :class="item.hasOwnProperty('icon') ? 'cus-menu-item' : ''"
      >
        <div class="title" v-if="item.hasOwnProperty('icon')">
          <img :src="item.icon" />
          <span
            :class="['menu-item-title', item.is_single ? 'single-menu' : '']"
            >{{ item.index_name }}</span
          >
        </div>
        <template v-else>
          <svg-icon v-if="item.icon_name" :icon-class="item.icon_name" />
          <span
            :class="['menu-item-title', item.is_single ? 'single-menu' : '']"
            style="margin-left: 8px"
            >{{ item.index_name }}</span
          >
        </template>

        <span
          v-if="item.show_report"
          title="专题报告"
          class="special-report bg-gray"
          :style="
            item.fileInfo
              ? {
                  color: theme,
                  background: ligthTheme,
                }
              : {}
          "
          style="font-size: 14px"
          @click.stop="handleReport(item)"
        >
          <svg-icon icon-class="体检报告" />
        </span>
      </el-menu-item>
      <el-submenu v-else :index="item.id">
        <template slot="title">
          <span class="sub-title">
            <svg-icon v-if="item.icon_name" :icon-class="item.icon_name" />
            <!-- <svg-icon v-if="item.icon_name" :icon-class="item.icon_name" /> -->
            <span style="margin-left: 8px">{{ item.index_name }}</span>
          </span>

          <span
            v-if="item.show_report"
            title="专题报告"
            class="special-report"
            :style="{
              color: theme,
              background: ligthTheme,
            }"
            style="font-size: 14px"
            @click.stop="handleReport(item)"
          >
            <svg-icon icon-class="体检报告" />
          </span>
        </template>
        <cus-menu
          v-for="child in item.children"
          :item="child"
          :key="child.id"
        />
      </el-submenu>
    </template>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'cus-menu',
  inject: ['injectReport'],
  props: {
    item: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  methods: {
    handleReport(item) {
      this.injectReport(item)
    },
  },
  computed: {
    ...mapGetters(['theme', 'ligthTheme']),
  },
}
</script>

<style lang="scss" scoped>
.menu-item-title {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #848a9f;
}

.single-menu,
.sub-title {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #4e525f;
}

.el-submenu__title {
  .special-report {
    display: inline-block;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    line-height: 24px;
    text-align: center;
    margin-top: 8px;
  }
}
.single-menu {
  margin-left: 8px;
}
.cus-menu-item {
  display: flex;
  justify-content: space-between;
  .title {
    display: flex;
    align-items: center;
    img {
      width: 20px;
      fill: #c0c4cc;
      display: inline-block;
      margin-right: 5px;
    }
  }

  .special-report {
    display: inline-block;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    line-height: 24px;
    text-align: center;
    margin-top: 8px;
  }
}
.bg-gray {
  background: gray;
  color: white;
}

::v-deep {
  .el-submenu__icon-arrow {
    display: none;
  }
}
</style>
